<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- slides -->
      <swiper-slide v-for="item in list" :key="item.id">
        <img :src="item.imgUrl" alt="" class="swiper-img">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script type='text/babel'>
export default {
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      }
    }
  },
  created () {
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  },
  methods: {},
  components: {}
}
</script>
<style>
  .wrapper .swiper-pagination-bullet-active{
    background: #fff;
  }
</style>
<style scoped lang="scss" rel="stylesheet/scss">
  /*.wrapper >>> .swiper-pagination-bullet-active{
    background: red;
  }*/
  .wrapper{
    width:100%;
    height:0;
    overflow: hidden;
    padding-bottom: 31.25%;
    background: #eee;
  }
  .swiper-img{
    width:100%;
  }
</style>
